﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>
</head>
<body>
</body>
</html>
<div style="padding-bottom: 5px;">
    <input id="line" type="button" value="Line" title="线" />
    <input type="button" value="Rectang" title="矩形" />
    <input type="button" value="Circle" title="圆" />
    <input type="button" value="Squares" title="正方形" />
</div>
<canvas id="canvas1" style="border: 1px solid red" width="1000" height="500"></canvas>

<script type="text/javascript">

    var engine = function () {
        this.canvas = document.getElementById("canvas1");
        this.context = this.canvas.getContext("2d");
        this.context.lineWidth = 1;
        this.context.strokeStyle = "blue";
        this.context.fillStyle = "black";
    }

    var line = function () {
        this.endPos = { x: 0, y: 0 };
        this.draw = false;

        this.path = [];

        engine.call(this, []);

        this.addEvent();
    }

    line.prototype.lines = [];

    line.prototype.render = function () {
        console.log(2);
        this.context.clearRect(0, 0, 1000, 500);
        for (var i = 0; i < this.lines.length; i++) {
            this.context.beginPath();
            this.context.moveTo(parseInt(this.lines[i].path[0].x), parseInt(this.lines[i].path[0].y));
            for (var j = 1; j < this.path.length; j++) {
                this.context.lineTo(parseInt(this.lines[i].path[j].x), parseInt(this.lines[i].path[j].y));
            }
            //this.context.closePath();
            this.context.stroke();
        }

    }

    line.prototype.timer = function () {
        this.render();
        var that = this;
        var _arg = arguments;
        window.requestAnimationFrame(function () { _arg.callee.apply(that, _arg) });
    }

    line.prototype.onMouseDown = function (e, pos) {
        this.lines.push(this);
        this.draw = true;
        this.endPos.x = pos.x;
        this.endPos.y = pos.y;
        this.path.push({ x: pos.x, y: pos.y });
    }

    line.prototype.onMouseMove = function (e, pos) {
        if (this.draw == false) {
            return;
        }
        this.endPos.x = pos.x;
        this.endPos.y = pos.y;
        this.path.push({ x: pos.x, y: pos.y });
    }

    line.prototype.onMouseUp = function (e, pos) {
        this.draw = false;
    }

    line.prototype.onClick = function (e, pos) {
        //alert(pos.x + "---" + pos.y);
    }

    line.prototype.addEvent = function () {
        var that = this;
        this.canvas.addEventListener("mousedown", function (event) {
            var x = event.clientX - that.getBodyOffsetLeft();
            var y = event.clientY - that.getBodyOffsetTop();
            that.onMouseDown(event, { x: x, y: y });
        }, false);
        this.canvas.addEventListener("mousemove", function (event) {
            var x = event.clientX - that.getBodyOffsetLeft();
            var y = event.clientY - that.getBodyOffsetTop();
            that.onMouseMove(event, { x: x, y: y });
        }, false);
        this.canvas.addEventListener("mouseup", function (event) {
            var x = event.clientX - that.getBodyOffsetLeft();
            var y = event.clientY - that.getBodyOffsetTop();
            that.onMouseUp(event, { x: x, y: y });
        }, false);
        this.canvas.addEventListener("click", function (event) {
            var x = event.clientX - that.getBodyOffsetLeft();
            var y = event.clientY - that.getBodyOffsetTop();
            that.onClick(event, { x: x, y: y });
        }, false);
    }

    line.prototype.getBodyOffsetTop = function () {
        var el = this.canvas;
        var top = 0;
        do {
            top = top + el.offsetTop;
        } while (el = el.offsetParent);
        return top;
    }

    line.prototype.getBodyOffsetLeft = function () {
        var el = this.canvas;
        var left = 0;
        do {
            left = left + el.offsetLeft;
        } while (el = el.offsetParent);
        return left;
    }

    var l = new line();
    l.timer();
</script>
